import React, { HtmlHTMLAttributes, useEffect, useRef, useState } from 'react';
import { View, Text, StyleSheet, Animated, Dimensions, FlatList, SafeAreaView, StatusBar } from 'react-native';
import { ReactChildren } from 'react-native-toast-message';
import Feather from 'react-native-vector-icons/Feather';

interface IGridLayoutProps<T> {
  menuList?: T[];
  renderItem: ({ item, index }: { item: T; index: number }) => JSX.Element;
  rowNum?:number
}

const GridLayout = <T extends unknown>({ menuList, renderItem,rowNum=4 }: IGridLayoutProps<T>) => {
  return (
    <>
        <FlatList scrollEnabled={false} numColumns={rowNum} initialNumToRender={rowNum} data={menuList} renderItem={renderItem} keyExtractor={(item, index) => index.toString()} />
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
});

export default GridLayout;
